<template>
  <Dialog :appDialog="appDialog">
    <div class="content" v-html="content"></div>
  </Dialog>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive, computed, watch } from "vue";
import Dialog from "@/components/Dialog.vue";

const emit = defineEmits(["submit", "cancel"]);
const content = ref("确认删除所选内容吗？");
// 取消
const cancelHandel = () => {
  emit("cancel");
  appDialog.visible = false;
};
//确定删除
const submitHandel = async () => {
  emit("submit");
  cancelHandel()
};
const appDialog = reactive({
  visible: false,
  title: "删除提醒",
  width: "400px",
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: "取消",
  submitText: "确定",
});
defineExpose({
  appDialog,
  content
});
</script>
<style lang="scss" scoped>
.content {
  min-height: 100px;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
